<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #first{
        background-color:lightcoral
      }
      #second{
        background-color: lightblue;
      }
      #third{
        background-color:lightseagreen
      }
      #fourth{
        background-color: lightslategrey;
      }
      .fade-enter-active,.fade-leave-active{
        transition: opacity 1s;
      }
      .fade-enter,.fade-leave-to{
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/about#first">About#first</router-link></li>
        <li><router-link to="/about#second">About#second</router-link></li>
        <li><router-link to="/about#third">About#third</router-link></li>
      </ul>
      <transition name="fade" mode="out-in" @after-enter="afterEnter">
        <router-view ></router-view>
      </transition>
      
    </div>
    <script src="https://static.zhufengpeixun.com/vue_1695401193557.js"></script>
    <script src="https://static.zhufengpeixun.com/vuerouter_1695401204264.js"></script>
    <script>
      const Home = {
        template: `<div>Home</div>`,
      };
      const About = {
        template: `
        <div>
          <div id="first" style="height:1500px">first</div>
          <div id="second" style="height:500px">second</div>
          <div id="third" style="height:500px">third</div>
          <div id="fourth" style="height:500px">fourth</div>
        </div>
        `,
      };
      const routes = [
        { 
          name: "home", 
          path: "/", 
          component: Home 
        },
        { 
          name: "about", 
          path: "/about", 
          component: About 
        }
      ];
      const scrollBehavior = function(to,from,savedPosition){
        //什么时候不直接返回{x,y},而是返回Promise ,异步的时候
        //比如说有动画的时候
        //return {x:0,y:200};
         return new Promise((resolve)=>{
          //等待根实例触发triggerScroll事件，当事件发生的时候才能让当前的Promise成功
          //当Promise成功后才会进行滚动
          //当动画完成后触发triggerScroll
          //在VueRouter 中
          //this 指的是VueRouter的实例
          //app 指的是Vue实例
          //$root 组件树，每一个组件都是一个Vue实例，Vue实例树
          //$root就是Vue实例树的根节点
          console.log('this.app===this.app.$root',this.app===this.app.$root)
          this.app.$root.$once('triggerScroll',()=>{
            resolve({x:0,y:200})
          });
        }); 
       /*  if(to.hash){
          return {
            selector:to.hash,
            offset:{x:0,y:100}
          }
        } */
        /* if(savedPosition){
          return savedPosition;
        }else{
          return {
            x:0,y:100
          }
        } */
      }
      var router = new VueRouter({
        mode: 'history',
        routes,
        scrollBehavior
      });
      var vm = new Vue({
        el: "#app",
        router,
        methods:{
          afterEnter(){
            //this指是当前的Vue实例
            //$root指的是根实例
            //
            console.log('this===$root',this===$root)
            this.$root.$emit('triggerScroll');
          }
        }
      });
    </script>
  </body>
</html>
